<template>
  <div class="mainsu">
    <div class="main_spac1">
      <div class="main_white padding10">
        <div class="mainor_form batch-wrap">
          <el-form
            :inline="true"
            :model="form"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="90px"
            id="form"
          >
            <el-form-item label="账单日期：" prop="order_time">
              <el-date-picker
                v-model="form.order_time"
                type="daterange"
                class="time220"
                :editable="false"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :clearable="false"
                :picker-options="setMonthDisabled"
                @change="getArticleList"
              />
            </el-form-item>
            <el-form-item label="商品分类：" prop="category_id" class="wid220">
              <el-cascader
                v-model="form.category_id"
                :options="options"
                :props="defaultProps"
                @change="getArticleList"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="商品：" prop="goods_spu_id">
              <change-goods-input
                ref="changeGoodsInput"
                @clear="
                  () => {
                    this.form.goods_spu_id = '';
                  }
                "
                @sendValue="
                  (data) => {
                    this.form.goods_spu_id = data.id;
                  }
                "
              ></change-goods-input>
            </el-form-item>
            <MainFormBtn @reset="reset" @getSearchFor="getArticleList" :loading="listLoading" :showBtn="moredata">
            </MainFormBtn>
            <div class="more el-form-item" @click="more">
              <span>更多</span>
              <i :class="[{ on: moredata }, ' el-icon-arrow-down']"></i>
            </div>
            <div class="clearfix"></div>
            <el-collapse-transition>
              <div v-show="moredata" style="width: 100%">
                <el-form-item label="用户名称：" prop="nickname">
                  <el-input
                    v-model.trim="form.nickname"
                    placeholder="用户名称"
                    clearable
                    class="wid220"
                  ></el-input>
                </el-form-item>
                <el-form-item label="用户分组：" prop="group_id">
                  <el-select
                    v-model.trim="form.group_id"
                    placeholder="用户分组"
                    class="wid220"
                    @change="getArticleList"
                  >
                    <el-option label="所有" value="0"></el-option>
                    <el-option
                      v-for="(group, index) in list.group"
                      :key="index"
                      :label="group"
                      :value="parseInt(index)"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <div class="clearfix"></div>
                <el-form-item label=" ">
                  <MainFormBtn class="btn-bottom mg-t-0" @reset="reset" @getSearchFor="getArticleList" :loading="listLoading" :showBtn="!moredata" />
                </el-form-item>
              </div>
            </el-collapse-transition>
          </el-form>
        </div>
        <div class="main_table mg-t-6">
          <el-table
          ref="multipleTable"
          v-loading="listLoading"
          :data="list.list"
          element-loading-text="加载中"
          fit
          border
          highlight-current-row
          :height="borderHeight"
          :header-cell-class-name="this.$verticaline"
          :header-cell-style="tableHeightStyle"
          @header-dragend="changeTableWidth"
        >
          <el-table-column label="商品名称" prop="name"
          :width="tableWidth[hash+'name']">
            <template slot-scope="scope"
              >{{ scope.row.goods_name }}【{{ scope.row.spu_name }}】</template
            >
          </el-table-column>
          <el-table-column label="单位" prop="unit" 
          :width="tableWidth[hash+'unit']"/>
          <el-table-column label="用户名称" prop="nickname"
          :width="tableWidth[hash+'nickname']" />
          <el-table-column label="用户分组  " prop="group_name" 
          :width="tableWidth[hash+'group_name']"/>

          <el-table-column
            label="价格"
            prop="account_price"
            class-name="main_hei"
            :width="tableWidth[hash+'account_price']"
          >
            <template slot-scope="scope">
              <div class="mainus_pe">
                <div v-if="!scope.row.freight_jc">
                  {{ scope.row.account_price }}
                  <svg
                    aria-hidden="true"
                    class="main_page_svg"
                    width="13"
                    height="13"
                    @click="freighta(scope.$index, 'freight_jc')"
                  >
                    <use xlink:href="#icon-commodity_modify" />
                  </svg>
                </div>
                <div v-else class="boxnr">
                  <el-input
                    v-model="scope.row.account_price"
                    placeholder="价格"
                    class="wid80"
                  ></el-input>
                  <div class="boxnr">
                    <svg
                      aria-hidden="true"
                      class="main_page_svg marginLeft10"
                      width="20"
                      height="20"
                      @click="
                        inputBlur(
                          scope.row.account_price,
                          scope.$index,
                          'freight_jc',
                          'account_price'
                        )
                      "
                    >
                      <use xlink:href="#icon-index_tick" />
                    </svg>
                    <svg
                      aria-hidden="true"
                      class="main_page_svg marginLeft10"
                      width="12"
                      height="12"
                      @click="
                        (scope.row.account_price =
                          scope.row.account_price_data),
                          (scope.row.freight_jc = false)
                      "
                    >
                      <use xlink:href="#icon-index_cross" />
                    </svg>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          </el-table>
        </div>
        <div class="main_page boxdq">
          <div></div>
          <!-- 分页 -->
          <div class="main_page_r">
            <MainPagination
              :current-page="current.page"
              :page-sizes="[20, 30, 50, 100]"
              :page-size="limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              background
              @size-change="changeLimit"
              @current-change="changePage"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mixins } from "@/mixins/index.js";
import {
  account_index,
  account_editPrice,
} from "@/api/financial/financialReceivables";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { parseTime, recursion, category } from "@/utils/index";

export default {
  mixins: [mixins],
  components: {},
  data() {
    return {
      // 列表数据
      list: {
        list: [],
        group: [],
      },
      listLoading: false,
      // 搜索
      form: {
        pid: "",
        category_id: [],
        order_time: [
          parseTime(new Date(), "{y}-{m}-{d}"),
          parseTime(new Date(), "{y}-{m}-{d}"),
        ],
        goods_spu_id: "",
        nickname: "",
        group_id: "",
      },
      moredata: false, // 更多
      // 分类
      options: [],
      defaultProps: {
        children: "selfNext",
        label: "title",
        value: "id",
        checkStrictly: true,
      },
      offsetParent: true,
      current: {
        page: 1,
        per_page: 20,
      },
      limit: 20,
      totalCount: 1,
      timeOptionRange: "",
      setMonthDisabled: {
        onPick: (time) => {
          //当第一时间选中才设置禁用
          if (time.minDate && !time.maxDate) {
            this.timeOptionRange = time.minDate;
          }
          if (time.maxDate) {
            this.timeOptionRange = null;
          }
        },
        disabledDate: (time) => {
          let timeOptionRange = this.timeOptionRange;
          let secondNum = 60 * 60 * 24 * 6 * 1000;
          if (timeOptionRange) {
            // if((timeOptionRange.getTime()+secondNum)>(Date.now() - 8.64e6))
            // {
            //     return time.getTime() > Date.now() - 8.64e6 || time.getTime() < timeOptionRange.getTime() - secondNum;
            // }
            return (
              time.getTime() > timeOptionRange.getTime() + secondNum ||
              time.getTime() < timeOptionRange.getTime() - secondNum
            );
          }
          return false;
        },
      },
    };
  },
  created() {
    // 列表
    this.getNumerical(170);
    this.account_index();
  },
  methods: {
    reset() {
      this.$refs['userListFrom'].resetFields()
      this.form.order_time = []
      this.$refs['changeGoodsInput'].name = ''
      this.account_index()
    },
    startGetting() {
      this.getArticleList();
    },
    // 点击排序
    freighta(index, name) {
      if (this.offsetParent) {
        this.list.list[index][name] = !this.list.list[index][name];
      }
    },
    // 多选框禁用
    disabledDate() {
      // let $this=this
      // return{
      //   disabledDate(date){
      //     if ($this.form.order_time?$this.form.order_time.length>=7:false) {
      //       let bol=true
      //       $this.form.order_time.forEach(e=>{
      //         if (parseTime(date.getTime(), "{y}-{m}-{d}")==e) {
      //           bol=false
      //         }
      //       })
      //       return bol
      //     }else{
      //       return false
      //     }
      //   }
      // }
    },
    // 焦点离开排序
    inputBlur(val, index, name, type) {
      this.offsetParent = false;
      if (/^(\d+\.?)?\d{0,2}$/.test(parseFloat(val)) && val != "") {
        this.list.list[index][name] = !this.list.list[index][name];
        this.offsetParent = true;
        this.goods_change(
          val,
          this.list.list[index].id,
          this.list.list[index].statement,
          type
        );
      } else {
        this.this.$message.error("请输入数字");
      }
    },
    goods_change(val, id, statement, type) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, {
                id: id,
                value: val,
              })
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: id, value: val, statement: statement }
      );
      account_editPrice(data).then((res) => {
        if (res.errcode == 0) {
          this.account_index();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 搜索
    getArticleList() {
      this.current.page = 1;
      this.account_index();
    },
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.account_index();
    },
    changePage(page) {
      this.current.page = page;
      this.account_index();
    },
    // 列表
    account_index() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, this.list_form(), this.current)
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        this.list_form(),
        this.current
      );
      account_index(data).then((res) => {
        this.listLoading = false;
        if (res.errcode == 0) {
          this.options = recursion(res.data.categoryList, true);
          if (!Array.isArray(res.data.list)) {
            let arr = [];
            for (const key in res.data.list) {
              arr.push(res.data.list[key]);
            }
            res.data.list = arr;
          }
          res.data.list.map((e) => {
            e.account_price_data = e.account_price;
            e.freight_jc = false;
            e.down = false;
          });
          this.list = res.data;
          console.log(list);
          
          this.totalCount = res.data.count;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    list_form() {
      let form = JSON.parse(JSON.stringify(this.form));
      // console.log(form.order_time);
      let DayBetween = this.getDayBetweenStartAndEnd(
        form.order_time[0],
        form.order_time[1]
      );
      form.order_time =
        form.order_time[0] == form.order_time[1]
          ? DayBetween
          : [form.order_time[0], ...DayBetween, form.order_time[1]];
      // console.log(form.order_time);
      form.order_time = form.order_time ? form.order_time.toString() : "";
      form.pid = form.category_id[0] ? form.category_id[0] : "";
      form.category_id = category(form.category_id);
      return form;
    },
    // 更多
    more() {
      this.moredata = !this.moredata;
    },
    getDayBetweenStartAndEnd(value1, value2) {
      if (value1 == value2) {
        return value1;
      }
      var getDate = function (str) {
        var tempDate = new Date(str);
        // var list = str.split("-");
        // tempDate.setFullYear(list[0]);
        // tempDate.setMonth(list[1] - 1);
        // tempDate.setDate(list[2]);
        return tempDate;
      };
      var date1 = getDate(value1);
      var date2 = getDate(value2);
      if (date1 > date2) {
        var tempDate = date1;
        date1 = date2;
        date2 = tempDate;
      }
      date1.setDate(date1.getDate() + 1);
      var dateArr = [];
      var i = 0;
      while (
        !(
          date1.getFullYear() == date2.getFullYear() &&
          date1.getMonth() == date2.getMonth() &&
          date1.getDate() == date2.getDate()
        )
      ) {
        var dayStr = date1.getDate().toString();
        var Month = (date1.getMonth() + 1).toString();
        if (dayStr.length == 1) {
          dayStr = "0" + dayStr;
        }
        if (Month.length == 1) {
          Month = "0" + Month;
        }
        dateArr[i] = date1.getFullYear() + "-" + Month + "-" + dayStr;
        i++;
        // document.write(dateArr[i] + "<br>");
        date1.setDate(date1.getDate() + 1);
      }
      return dateArr;
    },
    // 管理操作
    // 判断表格是否有子项，无子项不显示展开按钮

    // 保存
    formula_save(row, index) {
      let groupArr = [];
      for (let i in row.group) {
        let obj = {
          id: row.group[i].id,
          price: row.group[i].price,
        };
        groupArr.push(obj);
      }
      let form = {
        id: row.id,
        value: JSON.stringify(groupArr),
        send_time: this.form.send_time,
      };
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        form
      );
      account_editPrice(data).then((res) => {
        if (res.errcode == 0) {
          this.$message.success("修改成功");
          this.account_index();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainsu {
  .mainor_form form {
    width: calc(100% - 180px);
  }
}
::v-deep .el-icon-date:before {
  display: none;
}
.maincg_ul {
  ul {
    padding-left: 80px;
    li {
      margin-left: 40px;
      margin-right: 40px;
      margin-top: 6px;
      margin-bottom: 6px;
      align-items: center;
      span {
        font-size: $font_14;
        color: $colour_3;
      }
      /deep/.el-select {
        margin-left: 5px;
      }
      .maincg_uli {
        margin-left: 5px;
        position: relative;
        .maincg_uli_s {
          position: absolute;
          right: 10px;
          top: 8px;
          z-index: 9;
          use {
            fill: $menuText;
          }
          &:hover {
            cursor: pointer;
            use {
              fill: $menuActiveText;
            }
          }
        }
      }
    }
  }
}
.maincg_bj {
  margin-left: -30px;
  p {
    span {
      display: inline-block;
      width: 56px;
      text-align: right;
    }
    margin-left: 30px;
    color: $menuText;
    font-size: $font_14;
  }
}
.mainus_pe {
  svg {
    vertical-align: -3px;
    margin-left: 30px;
  }
  use {
    fill: $menuText;
  }
  &:hover {
    cursor: pointer;
    use {
      fill: $menuActiveText;
    }
  }
}
/deep/.el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
</style>
